<!DOCTYPE html>
<html lang="en" dir="auto">

<head><script src="/atomgit-blog/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=atomgit-blog/livereload" data-no-instant defer></script><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>FAQs / How To&#39;s Guide | PaperMod</title>
<meta name="keywords" content="PaperMod, Docs">
<meta name="description" content="We&rsquo;ll try to answer frequently asked qestions by users.">
<meta name="author" content="PaperMod Contributors">
<link rel="canonical" href="http://localhost:1313/atomgit-blog/posts/papermod/papermod-faq/">
<link crossorigin="anonymous" href="/atomgit-blog/assets/css/stylesheet.5ff2630c4d1b3e25bc21f0ecd96681dbcf58219e741fa627857820b5485cb770.css" integrity="sha256-X/JjDE0bPiW8IfDs2WaB289YIZ50H6YnhXggtUhct3A=" rel="preload stylesheet" as="style">
<link rel="icon" href="http://localhost:1313/atomgit-blog/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:1313/atomgit-blog/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:1313/atomgit-blog/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://localhost:1313/atomgit-blog/apple-touch-icon.png">
<link rel="mask-icon" href="http://localhost:1313/atomgit-blog/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="en" href="http://localhost:1313/atomgit-blog/posts/papermod/papermod-faq/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
  

<meta property="og:title" content="FAQs / How To&#39;s Guide" />
<meta property="og:description" content="We&rsquo;ll try to answer frequently asked qestions by users." />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://localhost:1313/atomgit-blog/posts/papermod/papermod-faq/" />
<meta property="og:image" content="http://localhost:1313/atomgit-blog/images/papermod-cover.png" />
<meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-01-20T00:00:00+00:00" />
<meta property="article:modified_time" content="2021-01-20T00:00:00+00:00" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="http://localhost:1313/atomgit-blog/images/papermod-cover.png" />
<meta name="twitter:title" content="FAQs / How To&#39;s Guide"/>
<meta name="twitter:description" content="We&rsquo;ll try to answer frequently asked qestions by users."/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "http://localhost:1313/atomgit-blog/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "PaperMod",
      "item": "http://localhost:1313/atomgit-blog/posts/papermod/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "FAQs / How To's Guide",
      "item": "http://localhost:1313/atomgit-blog/posts/papermod/papermod-faq/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "FAQs / How To's Guide",
  "name": "FAQs \/ How To\u0027s Guide",
  "description": "We\u0026rsquo;ll try to answer frequently asked qestions by users.",
  "keywords": [
    "PaperMod", "Docs"
  ],
  "articleBody": " We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\nYou can find any YML to TOML converters if necessary.\nOverride theme template By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.\nLet’s say you wish the list was different. All you have to do is copy the list template:\nyour-site/themes/papermod/layouts/_defaults/list.html And paste it under your own layouts folder:\nyour-site/layouts/_defaults/list.html Then you’re free to make any changes you want to the list. When Hugo builds your site, your copy of list.html will be used instead of the theme’s list.html.\nEnable Social-Metadata and SEO These include OpenGraph, Twitter Cards and Schema.\n1 2 params: env: production or set HUGO_ENV as “production” in system env-vars\nFailed to find a valid digest in the ‘integrity’ attribute for resource … ? Read about How Subresource Integrity helps: Subresource_Integrity\nWhy was the asset not loading ? : How_browsers_handle_Subresource_Integrity\nSolution:\nSet the following in config.yml\n1 2 3 params: assets: disableFingerprinting: true Linked Issues:\nhttps://stackoverflow.com/questions/65056585/hugo-theme-not-loading https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/ Bundling Custom css with theme’s assets For adding custom css to be bundled inside one minimized css Create folder in yout project directory as\n.(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── assets/ └── css/ └── extended/ \u003c--- ├── custom_css1.css \u003c--- └── any_name.css \u003c--- All css files inside assets/css/extended will be bundled !\nNote: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under assets/css/extended\nLinked Issues:\nPapermod Theme: How to add custom CSS? Custom Head / Footer Custom css/js can be added by way mentioned below.\n.(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── layouts ├── partials │ ├── comments.html │ ├── extend_footer.html \u003c--- │ └── extend_head.html \u003c--- └── robots.txt Create a html page in directory structure as shown above.\nContents of extend_head.html will be added to head of page.\nand contents of extend_footer.html will be added to bottom of page.\nAdd menu to site You can add menu entries which will appear in the header of every page.\nTo do so, add a menu section to your site’s config.yml:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 menu: main: - identifier: categories name: categories url: /categories/ weight: 10 - identifier: tags name: tags url: /tags/ weight: 20 - identifier: example name: example.org url: https://example.org weight: 30 name controls what will be displayed for the menu entry. url sets the URL that the entry points to. weight is used to control the positioning of entries.\nFor more information on menus, see the Hugo wiki page.\nPin a Post Post can be pinned/ displayed top on the list by adding a weight= var to page-variables\nexample:\n1 2 3 4 5 --- title: \"My Important post\" date: 2020-09-15T11:30:03+00:00 weight: 1 --- 1 2 3 4 5 --- title: \"My 2nd Important post\" date: 2020-09-15T11:30:03+00:00 weight: 2 --- Adding Custom Favicon(s) We support the following paths under /static directory and can be added accordingly.\nfavicon.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png safari-pinned-tab.svg Favicon(s) can be generated by Favicon.io and can be simply put in /static folder.\nOther way is to add favicon(s) NOT located in /static folder.\nIn site config add the following:\n1 2 3 4 5 6 7 params: assets: favicon: \"\" favicon16x16: \"\" favicon32x32: \"\" apple_touch_icon: \"\" safari_pinned_tab: \"\" Note: absolute url means direct links to external resource: ex. https://web.site/someimage.png\n1 2 3 4 5 6 7 params: assets: favicon: \"/favicon.ico\" favicon16x16: \"/favicon-16x16.png\" favicon32x32: \"/favicon-32x32.png\" apple_touch_icon: \"/apple-touch-icon.png\" safari_pinned_tab: \"/safari-pinned-tab.svg\" Centering image in markdown Add #center after image to center align an image\n1 ![name](path/to/image.png#center) When using figure shortcode\nuse align=center to center image with captions\n1 {{\u003c figure align=center src=\"image.jpg\" \u003e}} Using Hugo’s Syntax highlighter “chroma” Disable Highlight.js in site config.yml\n1 2 3 params: assets: disableHLJS: true Set hugo’s markdown styling in site config.yml\n1 2 3 4 5 6 7 8 markup: highlight: # anchorLineNos: true codeFences: true guessSyntax: true lineNos: true # noClasses: false style: monokai If you want lineNos: true, the background won’t be proper. This will only work with noClasses: false or pygmentsUseClasses: true. Read Generate Syntax Highlighter CSS\nAdd the following to assets/css/extended/custom.css\n1 2 3 .chroma { background-color: unset; } More Info : Configure Markup - Highlight\nSearch not working ? If you are using a CDN to server assets from a different domain, search would break\nWhy? Take a look at fastsearch.js#L35.\nWe fetch the index.json (where the search function looks for the keywords typed) one level up of the website search.min.js is hosted on.\nWe have used this insted of assigning baseURL so as to work with multilingual websites ex. example.com/fr/ and websites being placed under a subdirectory ex. example.com/blog/.\nTo fix for single language websites hosting assets from CDN, this you may override fastsearch.js#L35 and placing appropriate URL as in\n1 xhr.open(\"GET\", \"https://example.com/index.json\"); References Override a Hugo theme ",
  "wordCount" : "843",
  "inLanguage": "en",
  "image": "http://localhost:1313/atomgit-blog/images/papermod-cover.png","datePublished": "2021-01-20T00:00:00Z",
  "dateModified": "2021-01-20T00:00:00Z",
  "author":[{
    "@type": "Person",
    "name": "PaperMod Contributors"
  }],
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://localhost:1313/atomgit-blog/posts/papermod/papermod-faq/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "PaperMod",
    "logo": {
      "@type": "ImageObject",
      "url": "http://localhost:1313/atomgit-blog/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://localhost:1313/atomgit-blog/" accesskey="h" title="PaperMod (Alt + H)">PaperMod</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                <ul class="lang-switch"><li>|</li>
                    <li>
                        <a href="http://localhost:1313/atomgit-blog/fr/" title="French"
                            aria-label=":fr:">🇫🇷</a>
                    </li>
                    <li>
                        <a href="http://localhost:1313/atomgit-blog/fa/" title="Fa"
                            aria-label="Fa">Fa</a>
                    </li>
                </ul>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="http://localhost:1313/atomgit-blog/archives" title="Archive">
                    <span>Archive</span>
                </a>
            </li>
            <li>
                <a href="http://localhost:1313/atomgit-blog/search/" title="Search (Alt &#43; /)" accesskey=/>
                    <span>Search</span>
                </a>
            </li>
            <li>
                <a href="http://localhost:1313/atomgit-blog/tags/" title="Tags">
                    <span>Tags</span>
                </a>
            </li>
            <li>
                <a href="https://github.com/adityatelange/hugo-PaperMod/wiki/" title="WiKi">
                    <span>WiKi</span>&nbsp;
                    <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
                        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="http://localhost:1313/atomgit-blog/">Home</a>&nbsp;»&nbsp;<a href="http://localhost:1313/atomgit-blog/posts/">Posts</a>&nbsp;»&nbsp;<a href="http://localhost:1313/atomgit-blog/posts/papermod/">PaperMod</a></div>
    <h1 class="post-title entry-hint-parent">
      FAQs / How To&#39;s Guide
      <span class="entry-hint" title="Draft">
        <svg xmlns="http://www.w3.org/2000/svg" height="35" viewBox="0 -960 960 960" fill="currentColor">
          <path
            d="M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" />
        </svg>
      </span>
    </h1>
    <div class="post-meta"><span title='2021-01-20 00:00:00 +0000 UTC'>January 20, 2021</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;PaperMod Contributors&nbsp;|&nbsp;<a href="https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content/posts/papermod/papermod-faq.md" rel="noopener noreferrer" target="_blank">Suggest Changes</a>

</div>
  </header> <div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <span class="details">Table of Contents</span>
        </summary>

        <div class="inner"><ul>
                <li>
                    <a href="#override-theme-template" aria-label="Override theme template">Override theme template</a></li>
                <li>
                    <a href="#enable-social-metadata-and-seo" aria-label="Enable Social-Metadata and SEO">Enable Social-Metadata and SEO</a></li>
                <li>
                    <a href="#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--" aria-label="Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?">Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?</a></li>
                <li>
                    <a href="#bundling-custom-css-with-themes-assets" aria-label="Bundling Custom css with theme&rsquo;s assets">Bundling Custom css with theme&rsquo;s assets</a></li>
                <li>
                    <a href="#custom-head--footer" aria-label="Custom Head / Footer">Custom Head / Footer</a></li>
                <li>
                    <a href="#add-menu-to-site" aria-label="Add menu to site">Add menu to site</a></li>
                <li>
                    <a href="#pin-a-post" aria-label="Pin a Post">Pin a Post</a></li>
                <li>
                    <a href="#adding-custom-favicons" aria-label="Adding Custom Favicon(s)">Adding Custom Favicon(s)</a></li>
                <li>
                    <a href="#centering-image-in-markdown" aria-label="Centering image in markdown">Centering image in markdown</a></li>
                <li>
                    <a href="#using-hugos-syntax-highlighter-chroma" aria-label="Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;">Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;</a></li>
                <li>
                    <a href="#search-not-working-" aria-label="Search not working ?">Search not working ?</a></li>
                <li>
                    <a href="#references" aria-label="References">References</a>
                </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><blockquote>
<ul>
<li>
<p><strong>We&rsquo;ll be using <code>yml/yaml</code> format for all examples down below, I recommend using <code>yml</code> over <code>toml</code> as it is easier to read.</strong></p>
</li>
<li>
<p>You can find any <a href="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p>
</li>
</ul>
</blockquote>
<hr>
<h2 id="override-theme-template">Override theme template<a hidden class="anchor" aria-hidden="true" href="#override-theme-template">#</a></h2>
<p>By Hugo&rsquo;s Lookup Order, you can override any part of a theme that you want. The following is a quick example.</p>
<p>Let&rsquo;s say you wish the <code>list</code> was different. All you have to do is copy the <code>list</code> template:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">your-site/themes/papermod/layouts/_defaults/list.html
</span></span></code></pre></div><p>And paste it under your own <code>layouts</code> folder:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">your-site/layouts/_defaults/list.html
</span></span></code></pre></div><p>Then you&rsquo;re free to make any changes you want to the <code>list</code>.
When Hugo builds your site, your copy of <code>list.html</code> will be used instead of the theme&rsquo;s <code>list.html</code>.</p>
<hr>
<h2 id="enable-social-metadata-and-seo">Enable Social-Metadata and SEO<a hidden class="anchor" aria-hidden="true" href="#enable-social-metadata-and-seo">#</a></h2>
<p>These include OpenGraph, Twitter Cards and Schema.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">env</span><span class="p">:</span><span class="w"> </span><span class="l">production</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>or set <code>HUGO_ENV</code> as &ldquo;production&rdquo; in system env-vars</p>
<hr>
<h2 id="failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--">Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?<a hidden class="anchor" aria-hidden="true" href="#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--">#</a></h2>
<p>Read about How Subresource Integrity helps: <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource_Integrity</a></p>
<p>Why was the <code>asset</code> not loading ? : <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#How_browsers_handle_Subresource_Integrity">How_browsers_handle_Subresource_Integrity</a></p>
<p><strong>Solution:</strong></p>
<p>Set the following in <code>config.yml</code></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">assets</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">disableFingerprinting</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>Linked Issues:</p>
<ul>
<li><a href="https://stackoverflow.com/questions/65056585/hugo-theme-not-loading">https://stackoverflow.com/questions/65056585/hugo-theme-not-loading</a></li>
<li><a href="https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource">https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource</a></li>
<li><a href="https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/">https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/</a></li>
</ul>
<hr>
<h2 id="bundling-custom-css-with-themes-assets">Bundling Custom css with theme&rsquo;s assets<a hidden class="anchor" aria-hidden="true" href="#bundling-custom-css-with-themes-assets">#</a></h2>
<ul>
<li>For adding custom css to be bundled inside one minimized css</li>
</ul>
<p>Create folder in yout project directory as</p>
<pre tabindex="0"><code>.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
    └── css/
        └── extended/  &lt;---
            ├── custom_css1.css &lt;---
            └── any_name.css   &lt;---
</code></pre><p>All <code>css</code> files inside <code>assets/css/extended</code> will be bundled !</p>
<p><strong>Note</strong>: blank.css is just the placeholder so that it doesn&rsquo;t break the theme when no files are present under <code>assets/css/extended</code></p>
<p>Linked Issues:</p>
<ul>
<li><a href="https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165">Papermod Theme: How to add custom CSS?</a></li>
</ul>
<hr>
<h2 id="custom-head--footer">Custom Head / Footer<a hidden class="anchor" aria-hidden="true" href="#custom-head--footer">#</a></h2>
<p>Custom css/js can be added by way mentioned below.</p>
<pre tabindex="0"><code>.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── layouts
    ├── partials
    │   ├── comments.html
    │   ├── extend_footer.html &lt;---
    │   └── extend_head.html   &lt;---
    └── robots.txt
</code></pre><p>Create a html page in directory structure as shown above.</p>
<p>Contents of <code>extend_head.html</code> will be added to <code>head</code> of page.</p>
<p>and contents of <code>extend_footer.html</code> will be added to bottom of page.</p>
<hr>
<h2 id="add-menu-to-site">Add menu to site<a hidden class="anchor" aria-hidden="true" href="#add-menu-to-site">#</a></h2>
<p>You can add menu entries which will appear in the header of every page.</p>
<p>To do so, add a <code>menu</code> section to your site&rsquo;s <code>config.yml</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">menu</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">main</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">categories</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">categories</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">/categories/</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">10</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">tags</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">tags</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">/tags/</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">20</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span>- <span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">example</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">example.org</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="l">https://example.org</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">30</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p><code>name</code> controls what will be displayed for the menu entry.
<code>url</code> sets the URL that the entry points to.
<code>weight</code> is used to control the positioning of entries.</p>
<p>For more information on menus, see the <a href="https://gohugo.io/content-management/menus/">Hugo wiki page</a>.</p>
<hr>
<h2 id="pin-a-post">Pin a Post<a hidden class="anchor" aria-hidden="true" href="#pin-a-post">#</a></h2>
<p>Post can be pinned/ displayed top on the list by adding a <code>weight=&lt;num&gt;</code> var to page-variables</p>
<p>example:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;My Important post&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-09-15T11:30:03</span><span class="m">+00</span><span class="p">:</span><span class="m">00</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">1</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;My 2nd Important post&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-09-15T11:30:03</span><span class="m">+00</span><span class="p">:</span><span class="m">00</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">2</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h2 id="adding-custom-favicons">Adding Custom Favicon(s)<a hidden class="anchor" aria-hidden="true" href="#adding-custom-favicons">#</a></h2>
<p>We support the following paths under <code>/static</code> directory
and can be added accordingly.</p>
<ul>
<li><code>favicon.ico</code></li>
<li><code>favicon-16x16.png</code></li>
<li><code>favicon-32x32.png</code></li>
<li><code>apple-touch-icon.png</code></li>
<li><code>safari-pinned-tab.svg</code></li>
</ul>
<ol>
<li>
<p>Favicon(s) can be generated by <a href="https://favicon.io">Favicon.io</a> and can be simply put in <code>/static</code> folder.</p>
</li>
<li>
<p>Other way is to add favicon(s) NOT located in <code>/static</code> folder.</p>
<p>In site config add the following:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">assets</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / absolute url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon16x16</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / absolute url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon32x32</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / absolute url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">apple_touch_icon</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / absolute url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">safari_pinned_tab</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / absolute url&gt;&#34;</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>Note: <code>absolute url</code> means direct links to external resource: ex. <code>https://web.site/someimage.png</code></p>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">assets</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/favicon.ico&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon16x16</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/favicon-16x16.png&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon32x32</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/favicon-32x32.png&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">apple_touch_icon</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/apple-touch-icon.png&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">safari_pinned_tab</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;/safari-pinned-tab.svg&#34;</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h2 id="centering-image-in-markdown">Centering image in markdown<a hidden class="anchor" aria-hidden="true" href="#centering-image-in-markdown">#</a></h2>
<p>Add <code>#center</code> after image to center align an image</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">name</span>](<span class="na">path/to/image.png#center</span>)
</span></span></code></pre></td></tr></table>
</div>
</div><p><strong>When using <a href="https://gohugo.io/content-management/shortcodes/"><code>figure</code></a> shortcode</strong></p>
<p>use <code>align=center</code> to center image with captions</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">figure</span> <span class="na">align</span><span class="o">=</span><span class="s">center</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;image.jpg&#34;</span> <span class="p">&gt;</span>}}
</span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h2 id="using-hugos-syntax-highlighter-chroma">Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;<a hidden class="anchor" aria-hidden="true" href="#using-hugos-syntax-highlighter-chroma">#</a></h2>
<ol>
<li>
<p>Disable Highlight.js in site <code>config.yml</code></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">assets</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">disableHLJS</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>Set hugo&rsquo;s markdown styling in site <code>config.yml</code></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yml" data-lang="yml"><span class="line"><span class="cl"><span class="nt">markup</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">highlight</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># anchorLineNos: true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">codeFences</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">guessSyntax</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">lineNos</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c"># noClasses: false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l">monokai</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>If you want <code>lineNos: true</code>, the background won&rsquo;t be proper.
This will only work with <code>noClasses: false</code> or <code>pygmentsUseClasses: true</code>.
Read <a href="https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css">Generate Syntax Highlighter CSS</a></p>
<p>Add the following to <code>assets/css/extended/custom.css</code></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">chroma</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="k">background-color</span><span class="p">:</span> <span class="kc">unset</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>More Info : <a href="https://gohugo.io/getting-started/configuration-markup#highlight">Configure Markup - Highlight</a></p>
</li>
</ol>
<hr>
<h2 id="search-not-working-">Search not working ?<a hidden class="anchor" aria-hidden="true" href="#search-not-working-">#</a></h2>
<p>If you are using a CDN to server assets from a different domain, search would break</p>
<p>Why? Take a look at <a href="https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35">fastsearch.js#L35</a>.</p>
<p>We fetch the <code>index.json</code> (where the search function looks for the keywords typed) one level up of the website <code>search.min.js</code> is hosted on.</p>
<p>We have used this insted of assigning <code>baseURL</code> so as to work with multilingual websites ex. <code>example.com/fr/</code> and websites being placed under a subdirectory ex. <code>example.com/blog/</code>.</p>
<p>To fix for <em>single</em> language websites hosting assets from CDN, this you may <a href="/atomgit-blog/posts/papermod/papermod-faq/#override-theme-template">override</a> <a href="https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35">fastsearch.js#L35</a> and placing appropriate URL as in</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">&#34;GET&#34;</span><span class="p">,</span> <span class="s2">&#34;https://example.com/index.json&#34;</span><span class="p">);</span>
</span></span></code></pre></td></tr></table>
</div>
</div><hr>
<h2 id="references">References<a hidden class="anchor" aria-hidden="true" href="#references">#</a></h2>
<ul>
<li><a href="https://zwbetz.com/override-a-hugo-theme/">Override a Hugo theme</a></li>
</ul>


  </div>

  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="http://localhost:1313/atomgit-blog/tags/papermod/">PaperMod</a></li>
      <li><a href="http://localhost:1313/atomgit-blog/tags/docs/">Docs</a></li>
    </ul>
<nav class="paginav">
  <a class="prev" href="http://localhost:1313/atomgit-blog/posts/papermod/papermod-features/">
    <span class="title">« Prev</span>
    <br>
    <span>Features / Mods</span>
  </a>
  <a class="next" href="http://localhost:1313/atomgit-blog/posts/papermod/papermod-icons/">
    <span class="title">Next »</span>
    <br>
    <span>Social-Icons / Share-Icons</span>
  </a>
</nav>


<ul class="share-buttons">
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on x"
            href="https://x.com/intent/tweet/?text=FAQs%20%2f%20How%20To%27s%20Guide&amp;url=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f&amp;hashtags=PaperMod%2cDocs">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M512 62.554 L 512 449.446 C 512 483.97 483.97 512 449.446 512 L 62.554 512 C 28.03 512 0 483.97 0 449.446 L 0 62.554 C 0 28.03 28.029 0 62.554 0 L 449.446 0 C 483.971 0 512 28.03 512 62.554 Z M 269.951 190.75 L 182.567 75.216 L 56 75.216 L 207.216 272.95 L 63.9 436.783 L 125.266 436.783 L 235.9 310.383 L 332.567 436.783 L 456 436.783 L 298.367 228.367 L 432.367 75.216 L 371.033 75.216 Z M 127.633 110 L 164.101 110 L 383.481 400.065 L 349.5 400.065 Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on linkedin"
            href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f&amp;title=FAQs%20%2f%20How%20To%27s%20Guide&amp;summary=FAQs%20%2f%20How%20To%27s%20Guide&amp;source=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on reddit"
            href="https://reddit.com/submit?url=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f&title=FAQs%20%2f%20How%20To%27s%20Guide">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on facebook"
            href="https://facebook.com/sharer/sharer.php?u=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on whatsapp"
            href="https://api.whatsapp.com/send?text=FAQs%20%2f%20How%20To%27s%20Guide%20-%20http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on telegram"
            href="https://telegram.me/share/url?text=FAQs%20%2f%20How%20To%27s%20Guide&amp;url=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f">
            <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor">
                <path
                    d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share FAQs / How To&#39;s Guide on ycombinator"
            href="https://news.ycombinator.com/submitlink?t=FAQs%20%2f%20How%20To%27s%20Guide&u=http%3a%2f%2flocalhost%3a1313%2fatomgit-blog%2fposts%2fpapermod%2fpapermod-faq%2f">
            <svg version="1.1" xml:space="preserve" width="30px" height="30px" viewBox="0 0 512 512" fill="currentColor"
                xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
                <path
                    d="M449.446 0C483.971 0 512 28.03 512 62.554L512 449.446C512 483.97 483.97 512 449.446 512L62.554 512C28.03 512 0 483.97 0 449.446L0 62.554C0 28.03 28.029 0 62.554 0L449.446 0ZM183.8767 87.9921H121.8427L230.6673 292.4508V424.0079H281.3328V292.4508L390.1575 87.9921H328.1233L256 238.2489z" />
            </svg>
        </a>
    </li>
</ul>

  </footer>
</article>
    </main>
    
<footer class="footer">
        <span>© <a href="https://atomgit.com/kyle">Kyle</a></span> · 

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
